<template>
	<div class="a-list" ref="doms">
		<div class="a-item" :class="item.cls" :style="style" v-for="(item, i) in alreadyExists" :key="item.uuid">
			<slot name="row" :row="item.origin" :ago="item.ago" :rowIndex="i">
				{{ item.ago }}
			</slot>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from "vue";

import { uuidCreate } from "@/comm/uuid";
import { formatTimeAgo, formatTimestamp } from "@/comm/format";
import { sleep } from "@/comm/tooler";
import { difference } from "@/comm/arrayTooler";
// v-bind="$attrs"
type Item = {
	origin: any;
	timer: number;
	ago: string;
	uuid: string;
	cls: string;
};

const doms = ref();

const props = defineProps({
	list: {
		type: Array<any>,
		default: []
	},
	max: {
		type: Number,
		default: 6
	},
	interval: {
		type: Number,
		default: 1000
	}
});

const style = ref({
	animationDuration: Math.floor(props.interval * 0.8) + "ms"
});

const alreadyExists = ref(getTopList(props.list));
console.warn("alreadyExists", alreadyExists);
const waitingList = ref<any[]>([]);

function getTopList(ary: any[]) {
	let aim: Item[] = ary.map(i => wrapData(i));
	aim.sort((a, b) => (a.timer > b.timer ? -1 : 1));
	return aim.slice(0, props.max);
}

watch(
	() => [...props.list],
	(newVal, oldVal) => {
		// console.warn("总个数", oldVal.length, "--->", newVal.length)
		const diff = difference(newVal, oldVal);
		waitingList.value = waitingList.value.concat(diff);
	}
);

let tid = 0;
let playing = false;
onMounted(() => {
	updateAnim();

	// setTimeout(() => {
	//     window.clearTimeout(tid);
	// }, 5000);
});

onUnmounted(() => {
	window.clearTimeout(tid);
});

const stop = () => {
	window.clearTimeout(tid);
	// console.log("doms ------ ", doms.value);
};

defineExpose({
	stop
});

function updateAnim() {
	if (waitingList.value.length) {
		if (!playing) {
			addItem();
		}
	}
	alreadyExists.value.forEach(i => (i.ago = formatTimeAgo(i.timer)));
	tid = window.setTimeout(() => {
		updateAnim();
	}, props.interval);
}

function wrapData(item: any) {
	if (!item.timer) {
		item.timer = Date.now();
	}
	const obj: Item = {
		timer: item.timer,
		ago: "",
		uuid: uuidCreate(),
		origin: item,
		cls: ""
	};
	return obj;
}

const addItem = () => {
	playing = true;
	let ary = [...alreadyExists.value];
	ary.forEach(i => {
		// i.ago = formatTimeAgo(i.timer);
		i.cls = "has";
	});
	// let item = waitingList.value.shift();
	let item = wrapData(waitingList.value.shift());
	// console.log("waitingList 剩余个数", waitingList.value.length)
	item.cls = "will";
	ary.push(item);
	alreadyExists.value = ary.sort((a, b) => (a.timer > b.timer ? -1 : 1)).slice(0, props.max);

	setTimeout(
		() => {
			playing = false;
			alreadyExists.value.forEach(i => {
				i.cls = "";
			});
		},
		Math.floor(props.interval * 0.8)
	);
};

function getItemHeight() {
	let num = doms.value.querySelector(".a-item").clientHeight;
	return num;
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
